<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style>
        body{
            background-color: #ccc;
        }
        #app{
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border:4px solid blueviolet;
            border-radius: 1em;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
            padding:1em 2em 2em;
        }
        h3{
            text-align: center;
        }
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            border:1px solid #ccc;
            padding: 0 1em;
        }
        .title h4{line-height: 2;margin:0;}
        .container{
            border:1px solid #ccc;
            padding: 0 1em;
        }
        .btn {
            /* 鼠标改成手的形状 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>案例：折叠面板</h3>
       
        <!-- <my-pannel tit="标题1" content="内容1"></my-pannel>
        <my-pannel tit="标题2" content="内容2"></my-pannel> -->

        <!-- 通过v-for循环，生成多个折叠面板 -->
        <my-pannel
        v-for="(item,idx) in list"
        :tit='item.tit'
        v-bind:content='item.content'></my-pannel>
    </div>
    <script>
        // 对于上面的vue实现的折叠面板来说，如果一个页面上有多个折叠面板？应该如何处理？

        // 下面是用组件来解决的
        const vm = new Vue({
            el: "#app",
            data:{
                list:[
                    {tit:'标题1',content:'内容1'},
                    {tit:'标题2',content:'内容2'},
                    {tit:'标题3',content:'内容3'}
                ]
            },
            
            components: {
                // 定义的组件的名字
                MyPannel: {
                    data () {
                        return {
                            isVisiable: true, // 表示当前 内容是否显示
                        }
                    },
                    props:['tit','content'],
                    template: `
                        <div>
                            <div class="title">
                                <h4>{{tit}}</h4>
                                <span class="btn"
                                v-on:click="isVisiable= !isVisiable">
                                {{isVisiable ? '收起' : '展开'}}
                                </span>
                            </div>
                            <div class="container" v-show="isVisiable">
                                {{content}}
                            </div>
                        </div>
                    `
                }
            }
        })
       
    </script>

</body>
</html>